<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios基础使用</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>axios基础使用</h1>
    <button id="btnGet">get提交</button>
    <button id="btnPost">post提交</button>

    <script>
        const oBtnGte = document.getElementById('btnGet')
        const oBtnPost = document.getElementById('btnPost')

        //get请求
        oBtnGte.onclick = async function () {
            try {
                const re = await axios({
                    url: "/user", //路径
                    method: "get", //请求方式
                    headers: {}, //是否为异步
                    params: { //即将与请求一起发送的url参数
                        userId: "001"
                    },
                    data: {}, //请求体参数,只适用于post和put
                    timeout: 10000 //等待响应时间
                })
                console.log(re);
                console.log(re.data);
            } catch (e) {
                console.log(e.message);
            }
        }


        //post请求
        oBtnPost.onclick = async function () {
            try {
                const re = await axios({
                    url: "/adduser", //路径
                    method: "post", //请求方式
                    headers: {}, //是否为异步
                    params: {},  //即将与请求一起发送的url参数
                    data: {   //请求体参数,只适用于post和put
                        name: "韩立",
                        age: 14300,
                        sex: "男"
                    }, 
                    timeout: 10000 //等待响应时间
                })
                console.log(re);
                console.log(re.data);
            } catch (e) {
                console.log(e.message);
            }
        }
    </script>
</body>

</html>